<template>
	<div id="">
		<div class="header" style="border-bottom:none;height:120px">
			<div class="position">
				<div class="header-content">
				<div class="logo">
					<a class="logo-a" href=""><img :src="picture.logo" /></a>
				</div>
				<div class="search-box">
					<div class="right-btn">
						<a class="right-btn-a" href="">传设计稿赚钱</a>
					</div>
					<div class="fixed-search">
						<input class="search-input" type="text" name="" id="" value="" placeholder="请输入标题、关键字、编号搜索" />
						<a href="" class="searchbtn">
							<span class="searchbtn-img"></span>
						</a>
					</div>
					<div class="hottest">
						
						<a class="hottest-a" href="">两会<span class="hottest-a-i"></span></a>
						<a class="hottest-a" href="">小升初简历<span class="hottest-a-i"></span></a>
						<a class="hottest-a" href="">招聘<span class="hottest-a-i"></span></a>
						<a class="hottest-a" href="">新中式<span class="hottest-a-i"></span></a>
						<a class="hottest-a" href="">企业文化墙<span class="hottest-a-i"></span></a>
						<a class="hottest-a" href="">企业画册<span class="hottest-a-i"></span></a>
						<a class="hottest-a" href="">企业简介ppt</a>

					</div>
				</div>

			</div>
			</div>
			
			<div class="nav-footer">
				<div class="w1200">
					<div class="all-class">
						<a class="all-class-a" href="">
							<span class='all-class-a-span'></span> 全部分类
						</a>
						<div class="all-nav">
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-one'></span> 背景墙
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-tow'></span> 平面设计
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-three'></span> PPT模板
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-four'></span> 视频素材
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-fif'></span> 淘宝模板
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-six'></span> 设计元素
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-sev'></span> 手抄报
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>
							<div class="all-nav-class">
								<a class="all-nav-a" href="">
									<span class='all-nav-a-span-eig'></span> 更多素材
									<span class='all-nav-a-span2'></span>
									<plug class='plug'></plug>
								</a>
							</div>

						</div>
					</div>
					<div class="all-class-other">
						<a class="all-class-other-a" href="">广告设计</a>
						<a class="all-class-other-a" href="">装饰设计</a>
						<a class="all-class-other-a" href="">商业办公</a>
						<a class="all-class-other-a" href="">活动策划</a>
						<a class="all-class-other-a" href="">党政文化</a>
						<a class="all-class-other-a" href="">教育培训</a>
						<a class="all-class-other-a" href="">电商设计</a>
						<a class="all-class-other-a" href="">VIP素材 <span class="all-class-other-a-i">特惠</span></a>
					</div>
				</div>

			</div>
		</div>
		<div class="zhong">
			<div class="people">
				<div class="people-count">
					<div class="count">
						我图会员数:
						<span class="count-count">19,695,028</span> 人
					</div>
					<div class="work">
						作品总数:
						<span class="work-count">3,692,949</span> 张
					</div>
				</div>
				<div class="tip-count">
					<dl class="tip-count-ban">
						<span class="tip-count-ban-map"></span>
						<dd class="tip-count-ban-mapone">原创可商用</dd>
					</dl>
					<dl class="tip-count-xin">
						<span class="tip-count-xin-sea"></span>
						<dd class="tip-count-xin-seaone">海量更新</dd>
					</dl>
					<dl class="tip-count-fast">
						<span class="tip-count-fast-next"></span>
						<dd class="tip-count-fast-nextone">告诉下载</dd>
					</dl>
					<dl class="tip-count-sell">
						<span class="tip-count-sell-wan"></span>
						<dd class="tip-count-sell-wanone">完美售后</dd>
					</dl>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import plug from '../plug/plug.vue'
	import $ from 'jquery'
	export default {

		data() {
			return {
				show: {}
			}

		},

		//父组件传给子组件时候，子组件用props接受，，
		props: {
			picture: {

				type: Object
			}
		},
		components: {
			plug,
		}
	}
	
	$(document).ready(function() {  
            var navOffset=$(".position").offset().top;  
            
          
            $(window).scroll(function(){  
                var scrollPos=$(window).scrollTop();  
             
                if(scrollPos >=navOffset){  
                    $(".position").addClass("fixed");  
                }else{  
                    $(".position").removeClass("fixed");  
                }  
            });  
 
        }); 
</script>

<style lang="less" rel="stylesheet/less">
	.header {
		position: relative;
		width: 100%;
		padding-top: 30px;
		background: white;
		z-index: 800;
		
		.header-content {
			width: 1200px;
			height: 78px;
			margin: 0 auto;
			.logo {
				width: 325px;
				height: 36px;
				float: left;
				margin: 7px 125px 0 5px;
			}
			.search-box {
				flex: 1;
				float: right;
				width: 740px;
				height: 66px;
				.fixed-search {
					width: 536px;
					height: 40px;
					margin-bottom: 5px;
					.searchbtn {
						float: right;
						width: 76px;
						height: 40px;
						background: rgb(0, 175, 109);
						margin-right: 9.78px;
						.searchbtn-img {
							display: block;
							background-image: url(header.png);
							background-repeat: no-repeat;
							background-position: -16px 0;
							width: 25px;
							height: 27px;
							margin: 10px auto;
						}
					}
					.search-input {
						box-sizing: border-box;
						width: 450.233px;
						height: 40px;
						border: 2px solid rgb(0, 175, 109);
						padding: 0 10px;
						outline: none;
						color: rgb(178, 178, 178);
					}
				}
				.hottest {
					font-size: 12px;
					.hottest-a {
						vertical-align: middle;
						line-height: 12px;
						text-decoration: none;
						color: rgb(127, 127, 127);
						.hottest-a-i {
							display: inline-block;
							vertical-align: middle;
							height: 10px;
							margin: 0 8px 2px;
							border-left: 1px solid rgb(127, 127, 127);
						}
					}
				}
			}
			.right-btn {
				float: right;
				width: 127px;
				height: 42px;
				border: 1px solid rgb(127, 127, 127);
				.right-btn-a {
					text-decoration: none;
					color: rgb(91, 91, 91);
					font-size: 15px;
					line-height: 44px;
					padding: 12px 18.5px;
				}
			}
		}
		.nav-footer {
			position: relative;
			width: 1200px;
			height: 42px;
			margin: 0 auto;
			
			.all-class {
				position: relative;
				display: inline-block;
				width: 200px;
				.all-class-a {
					color: white;
					display: inline-block;
					width: 170px;
					height: 42px;
					line-height: 42px;
					background: rgb(0, 179, 105);
					.all-class-a-span {
						display: inline-block;
						background-image: url(header.png);
						width: 20px;
						height: 20px;
						background-position: 0 -20px;
						margin: 0 10px 0 22px;
					}
				}
				.all-nav {
					width: 70px;
					max-height: 400px;
					position: absolute;
					.all-nav-class {
						width: 170px;
						height: 50px;
						.all-nav-a {
							color: white;
							display: inline-block;
							width: 170px;
							height: 50px;
							line-height: 50px;
							background: rgba(0, 0, 0, 0.8);
							.plug {
								position: absolute;
								top: 0;
								margin-left: 170px;
								display: none;
							}
							&:hover .plug {
								display: block;
							}
							.all-nav-a-span-one {
								display: inline-block;
								background-image: url(header.png);
								vertical-align: middle;
								width: 20px;
								height: 20px;
								background-position: 0 -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span-tow {
								display: inline-block;
								vertical-align: middle;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -22px -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span-three {
								display: inline-block;
								vertical-align: middle;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -45px -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span-four {
								display: inline-block;
								vertical-align: middle;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -68px -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span-fif {
								vertical-align: middle;
								display: inline-block;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -88px -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span-six {
								vertical-align: middle;
								display: inline-block;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -112px -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span-sev {
								vertical-align: middle;
								display: inline-block;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -135px -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span-eig {
								vertical-align: middle;
								display: inline-block;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -161px -45px;
								margin: 0 10px 0 22px;
							}
							.all-nav-a-span2 {
								float: right;
								margin: 14px 10px;
								display: inline-block;
								background-image: url(header.png);
								width: 20px;
								height: 20px;
								background-position: -20px -22px;
							}
						}
					}
				}
			}
			.all-class-other {
				display: inline-block;
				.all-class-other-a {
					margin: 0 25px;
					color: rgb(51, 51, 51);
					font-size: 15px;
					font-weight: 700;
					.all-class-other-a-i {
						width: 30px;
						height: 16px;
						background-color: rgb(255, 114, 0);
						font-size: 12px;
						font-weight: 400;
						color: white;
						border-radius: 2px;
						padding: 1px;
					}
				}
			}
		}
	}
	
	.zhong {
		position: absolute;
		width: 100%;
		top: 582px;
		background: white;
		.people {
			height: 50px;
			width: 1200px;
			line-height: 50px;
			font-size: 14px;
			margin: 0 auto;
			.people-count {
				margin-left: 38px;
				display: inline-block;
				width: 500px;
				.count {
					display: inline-block;
					margin-right: 28px;
					color: rgb(127, 127, 127);
					.count-count {
						color: red;
					}
				}
				.work {
					display: inline-block;
					color: rgb(127, 127, 127);
					.work-count {
						color: red;
					}
				}
			}
			.tip-count {
				display: inline-block;
				width: 542px;
				.tip-count-ban {
					font-size: 0;
					margin-left: 35px;
					width: 106px;
					display: inline-block;
					.tip-count-ban-map {
						vertical-align: middle;
						display: inline-block;
						height: 30px;
						width: 30px;
						background-image: url(new.png);
						background-position: 0 -70px;
					}
					.tip-count-ban-mapone {
						font-size: 14px;
						display: inline-block;
					}
				}
				.tip-count-xin {
					margin-left: 35px;
					width: 92px;
					display: inline-block;
					.tip-count-xin-sea {
						vertical-align: middle;
						display: inline-block;
						height: 30px;
						width: 30px;
						background-image: url(new.png);
						background-position: 0 -102px;
					}
					.tip-count-xin-seaone {
						display: inline-block;
						font-size: 14px;
					}
				}
				.tip-count-fast {
					margin-left: 35px;
					width: 92px;
					display: inline-block;
					.tip-count-fast-next {
						vertical-align: middle;
						display: inline-block;
						height: 30px;
						width: 30px;
						background-image: url(new.png);
						background-position: 0 -130px;
					}
					.tip-count-fast-nextone {
						display: inline-block;
						font-size: 14px;
					}
				}
				.tip-count-sell {
					margin-left: 40px;
					width: 92px;
					display: inline-block;
					.tip-count-sell-wan {
						vertical-align: middle;
						display: inline-block;
						height: 30px;
						width: 30px;
						background-image: url(new.png);
						background-position: 0 -160px;
					}
					.tip-count-sell-wanone {
						font-size: 14px;
						display: inline-block;
					}
				}
			}
		}
	}
	
    .fixed {  
        position: fixed;  
        height: 60px;
        top: 0;  
        width: 100%;  
        padding-top:10px;
        margin: 0 auto;  
        left: 0;   
        z-index: 10000;  
        background: white;
        
        .right-btn{
        	display: none;
        }
        .hottest{
        	display: none;
        }
    }  

</style>